<template>
  <!--  对应后台的excel模板见压缩文件，excel名称中写了“下载模板”的就直接导出模板就可以了，其他的就要取查询数据。 -->
  <el-card class="w-full pt-[5px]">
    <div class="font-bold block-title">
      <el-icon class="mr-[5px] text-[#409EFF] align-middle" :size="26"><Management /></el-icon>教育部年度统计
    </div>
    <el-divider class="mt-2"/>
    <el-form :model="searchForm" class="mt-[20px]" label-width="110px">
      <el-row :gutter="20" class="py-3 px-4 my-2 bg-gray-100">
        <el-col :span="24">
          <el-form-item label="选择数据年度：" class="mb-[20px]">
            <el-date-picker
                v-model="searchForm.year"
                type="year"
                placeholder="请选择年份" 
                :disabled-date="datePickerOptions"
                @change="yearChange"
              />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-radio-group v-model="searchForm.type" @change="typeChange">
            <el-radio key="社科类" :value="1">社科类</el-radio>
            <el-radio key="科技类" :value="2">科技类</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </el-form>

    <div class="mb-[20px] export-btn-box" v-loading="loading">
      <el-button v-for="item in list" type="warning" class="w-full h-[60px] pt-[5px] mt-[10px] btn" plain @click="handerExport(item)">
        <!-- <svg-icon iconClass="export"></svg-icon>
        <el-icon :size="20"><Download /></el-icon> -->
        <img src="@/assets/icons/back.png" alt="light" class="back" style="width: 20px;"/>
        <img src="@/assets/icons/backactive.png" alt="light" class="backactive" style="width: 20px;"/>
        <span class="text-xs pl-1">{{ item }}</span>
      </el-button>
    </div>
  </el-card>
</template>

<script setup>
import { exportFile } from "@/api/statistics";
import { downloadFile } from "@/utils/main";
import { datePickerOptions } from "../common.js"
// import { getToken } from "@/utils/auth";
// import useAppStore from '@/store/modules/app'
// import usePagination from "@/hooks/pagination";
// import useOperate from "@/hooks/operate";
// const router = useRouter();
// const appStore = useAppStore()
// const { proxy } = getCurrentInstance();

const typeOptions = {
  '1':[
    '院系所数据导出',    
    '社科活动人员数据导出',
    '科研成果数据导出',
    '科研项目数据导出',
    '成果获奖数据导出',
    '研究机构数据导出',
    '项目年度工作量数据导出',
    '项目年度经费数据导出'
  ],
  '2':[
    '科技人力资源数据导出',
    '科技经费数据导出',
    '科技活动机构数据导出',
    '科技项目(课题)数据导出',
    '科技交流数据导出',
    '技术转让与知识产权情况导出',
    '科技成果数据导出',
    '出版科技著作数据导出',
    '科技成果奖励数据导出',
    '科技期刊数据导出'
  ]
}

const loading = ref(false)
const searchForm = ref({
  year: new Date().getFullYear()+"",
  type: 1,
  subType:''
});
const list = ref(typeOptions['1'])

const yearChange = (item)=>{
  console.log(new Date(item).getFullYear())

}
const typeChange = (item)=>{
  list.value = typeOptions[item]
}

const handerExport = (item) => {
  const { type } = searchForm.value
  let params = {
    year: searchForm.value.year ? new Date(searchForm.value.year).getFullYear() : new Date().getFullYear(),
    type,
    subType: item
  }
  loading.value = true;
  exportFile('/statistics/education',params).then((res) => {
    loading.value = false;
    downloadFile(res, `${item}_${new Date().getTime()}.xlsx`);
  })
  .catch((error) => {
    loading.value = false;
    console.log(error);
  });
  // 下载的 全局方法 post方法
  // proxy.download("/statistics/fixedReportExport",  params, `user123_${new Date().getTime()}.xlsx`);
}
</script>

<style scoped lang="scss">
.el-button+.el-button {
    margin-left: 0px;
}
.btn{
  border-style: dashed;
  .back {
      display: block;
    }
    .backactive{
      display: none;
    }
  &:hover{
    .back {
      display: none;
    }
    .backactive{
      display: block;
    }
  }
}
</style>

